<template>
	<view class="listsItem">
		<view class="listsVfor">
			<view class="listsTop">
				<u--image :showLoading="true" :src="detailData.image" width="126rpx" height="126rpx"
					radius="0"></u--image>
				<view class="lists_right">
					<view class="lists_">
						<view>
							<view class="lists_name">
								<text>
									{{detailData.description}}
								</text>
							</view>
						</view>
					</view>
					<view class="lists_illustrate u_flex">
						<view>
							<text>{{ detailData.mobile }}</text>
							<text>扫码添加客服微信</text>
						</view>

					</view>
				</view>
				<u--image :showLoading="true" :src="detailData.kefu_qrcode_text" width="156rpx" height="146rpx"
					@click="handlePreview(detailData.kefu_qrcode_text)" radius="0"></u--image>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		shopDetail
	} from "../../api/Home";
	export default {
		name: "showBand.vue",
		props: {
			info: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				detailData: {}
			}
		},
		mounted() {
			this.getDetail()
		},
		methods: {
			async getDetail() {
				try {
					const res = await shopDetail({
						shop_id: uni.getStorageSync('shop_id') || 1
					});
					this.detailData = res.data
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			//预览图片
			handlePreview(url) {
				console.log(url,"url")
				uni.previewImage({
					urls: [url], // 需要预览的图片链接列表
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.listsItem {
		.listsVfor {
			width: 100%;
			margin: 0px auto;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			background-color: #fff;
			padding-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			border-radius: 32rpx;
			box-sizing: border-box;

			.listsTop {
				width: 100%;
				display: flex;
				align-items: center;
			}

			image {
				width: 190rpx;
				min-width: 190rpx;
				height: 200rpx;
				border-radius: 15rpx;
			}

			.lists_right {
				width: 70%;
				padding-left: 20rpx;

				// border:1px solid greenyellow;
				.lists_ {
					width: auto;
					// border:1px solid red;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.listsAddress {
						text {
							display: block;
							font-size: 20rpx;
							color: #b5b5b5;
							text-align: right;
							margin-bottom: 5rpx;
						}
					}
				}

				.lists_name {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					text {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}
				}

				.lists_tag {
					display: flex;
					align-items: center;
					margin-top: 15rpx;

					/deep/ .u-tag--warning--plain {
						border-color: #c3c3c3;
						margin-right: 20rpx;
					}

					/deep/ .u-tag--mini {
						margin-right: 20rpx;
					}

					/deep/ .u-tag-wrapper {
						margin-right: 10rpx;
					}
				}

				.lists_illustrate {
					// width: 80%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #888888;

					text {
						padding-left: 10rpx;
					}
				}

				.u_flex {
					margin-top: 5rpx;

					view {
						text {
							color: #000000;
							display: block;
							font-size: 24rpx;
							font-weight: 500;
							margin-left: 10rpx;
							margin-bottom: 5rpx;
						}
					}
				}

				.NewFlex {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					text {
						color: #029CFE;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
	}
</style>